/* eslint no-underscore-dangle: 0 */
import React, { Component } from 'react';
import { Table, Pagination, Message } from '@alifd/next';
import IceContainer from '@icedesign/container';
import FilterForm from './Filter';
import styles from './index.module.scss';
import request from '../../../../utils/request';
import { host, stringCheck } from '../../../../const';
import WebStorageCache from 'web-storage-cache';
import classnames from 'classnames';

const wsCache = new WebStorageCache();
export default class EnhanceTable extends Component {
    constructor(props) {
        super(props);

        this.state = {
            battleRecordDataSourece: {
                total: 0,
            },
            query: {
                page: 1,
                pageSize: 10,
            },
        };
        this.refreshTableData();
    }


  filterFormChange=(value) => {
      this.state.query.name = value.name;
  }

  handlePaginationChange=(value) => {
      this.state.query.page = value;
      this.refreshTableData();
  }

  filterTable=() => {
      this.state.query.page = 1;
      this.state.query.pageSize = 10;
      this.refreshTableData();
  }

  refreshTableData=() => {
      request({
          method: 'POST',
          url: `${host}/battle/query`,
          data: this.state.query,
      }).then((res) => {
          const data = res?.data?.data;
          const code = res?.data?.code;
          if (code === 200) {
              if (data.list != null) {
                  data.list.forEach((item) => {
                      if (stringCheck(item.endTime) != null) {
                          item.endTime = item.endTime.replace('T', ' ');
                          item.endTime = item.endTime.substr(0, 19);
                      }
                  });
              }
              this.setState({
                  battleRecordDataSourece: data,
              });
          }
      });
  }

  renderTitle = (value, index, record) => (
      <div className={styles.titleWrapper}>
          <span className={styles.title}>{record.title}</span>
      </div>
  );

  deleteBattle=(record) => {
      request({
          method: 'DELETE',
          url: `${host}/battle/${record.id}`,
      }).then(() => {
          Message.success('删除成功');
          this.refreshTableData();
      });
  }

  goReplay=(record) => {
      wsCache.set('mapTyeForReplay', record.mapType);
      setTimeout(() => {
          window.location.href = `#/battle/replay/${record.id}`;
      }, 0);
  }

  renderOperations = (value, index, record) => (
      <div
          className={classnames(styles.filterTableOperation, 'filter-table-operation')}
      >
          <a onClick={this.goReplay.bind(this, record)} href="javascript:;" className={styles.operationItem} >
          回放
          </a>
          <a href="javascript:;" onClick={this.deleteBattle.bind(this, record)}>
          删除
          </a>
      </div>
  );


  render() {
      return (
          <div className="filter-table">
              <IceContainer title="内容筛选">
                  <FilterForm
                      onChange={this.filterFormChange}
                      onSubmit={this.filterTable}
                  />
              </IceContainer>
              <IceContainer>
                  <Table
                      dataSource={this.state.battleRecordDataSourece.list}
                      className="basic-table"
                      style={styles.basicTable}
                      hasBorder={false}
                  >
                      <Table.Column
                          title="方案名称"
                          dataIndex="name"
                      />
                      <Table.Column
                          title="地图类型"
                          dataIndex="mapType"
                          cell={value => (Number(value) === 1 ? '室内地图' : '室外地图')}
                      />
                      <Table.Column
                          title="开始时间"
                          dataIndex="beginTime"
                      />
                      <Table.Column
                          title="结束时间"
                          dataIndex="endTime"
                      />
                      <Table.Column
                          title="操作"
                          dataIndex="operation"
                          width={150}
                          cell={this.renderOperations}
                      />
                  </Table>
                  <div className={styles.paginationWrapper}>
                      <Pagination
                          current={this.state.query.page}
                          onChange={this.handlePaginationChange}
                          total={this.state.battleRecordDataSourece.total}
                          pageSize={10}
                      />
                  </div>
              </IceContainer>
          </div>
      );
  }
}
